
import React, { Component } from 'react';
import { HashRouter as Router, Link, Route } from 'react-router-dom';

import { connect } from 'react-redux';

import './App.css';

import Todo from './components/todoList/index.jsx';
import Hello from './components/helloReact/index.jsx'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)
class App extends Component {
  render() {
    const state = this.props;
    console.log('state', state)
    return (
      <Router>
      <div className="App">
        <hr/>
        <header>
          <Link className="link" to="/">home</Link>
          <Link className="link" to="/todoList">todoList</Link>
          <Link to="/hello">hello React</Link>
        </header>
        <hr/>
        <Route path="/" exact component={Home}></Route>
        <Route path="/todoList" component={Todo}></Route>
        <Route path="/hello" component={Hello}></Route>
      </div>
    </Router>
    )
  }
}
// const App = function() {
//   return (
    
//     <Router>
//       <div className="App">
//         <hr/>
//         <header>
//           <Link className="link" to="/">home</Link>
//           <Link className="link" to="/todoList">todoList</Link>
//           <Link to="/hello">hello React</Link>
//         </header>
//         <hr/>
//         <Route path="/" exact component={Home}></Route>
//         <Route path="/todoList" component={Todo}></Route>
//         <Route path="/hello" component={Hello}></Route>
//       </div>
//     </Router>
//   );
// }

function getVal(state) {
  console.log(state);
  return {
    age: state
  }
}

// export default App;
export default connect(getVal)(App);